<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户昵称">
                <a-input allowClear v-model="queryParam.user_name" placeholder="请输入用户昵称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单号码">
                <a-input allowClear v-model="queryParam.order_no" placeholder="请输入订单号码" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="下单日期">
                <a-config-provider :locale="locale">
                  <a-range-picker
                    format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%"
                    @change="(e, i) => onChange(1, e, i)"
                    :ranges="ranges"
                  />
                </a-config-provider>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="收货时间">
                <a-config-provider :locale="locale">
                  <a-range-picker
                    format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%"
                    @change="(e, i) => onChange(2, e, i)"
                    :ranges="ranges"
                  />
                </a-config-provider>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList()">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="getList()">
          <a-radio-button value="-1"> 全部 </a-radio-button>
          <a-radio-button value="2"> 待收货 </a-radio-button>
          <a-radio-button value="3"> 已收货 </a-radio-button>
          <a-radio-button value="4"> 已完成 </a-radio-button>
        </a-radio-group>

        <a-button @click="exportFn">批量导出</a-button>
      </div>

      <a-alert class="alert" message="检索结果" type="info" show-icon>
        <div slot="description">
          <span
            >已检索<em>{{ all_data.totalCount }}条</em></span
          >
          <span
            >订单总额<em>{{ all_data.total_price }}元</em></span
          >
          <span
            >实际付款总额<em>{{ all_data.pay_price }}元</em></span
          >
          <span
            >分销支出总额<em>{{ all_data.share_money }}元</em></span
          >
          <span
            >门店支出总额 <em>{{ all_data.md_profit }}元</em></span
          >
          <span
            >极差支出总额 <em>{{ all_data.share_detail_sub }}元</em></span
          >
          <span
            >股东分红总额 <em>{{ all_data.share_detail }}元</em></span
          >
          <span
            >平台抽成总额 <em>{{ all_data.sharing_receiver }}元</em></span
          >
        </div>
      </a-alert>
      <a-table
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        size="default"
        :columns="columns"
        :data-source="list"
        :scroll="{ x: 'max-content' }"
        :pagination="{
          page: this.pageNo,
          total: this.total,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
        :defaultExpandAllRows="true"
        :expandedRowKeys.sync="defaultExpandedRowKeys"
      >
        <div slot="content" slot-scope="text, record">
          <div class="content">
            <div class="img">
              <a-avatar shape="square" :size="48" icon="user" :src="record.avatar" />
            </div>

            <div class="txt">
              <h3>{{ record.name }}</h3>
              <p>{{ record.mobile }}</p>
            </div>
          </div>
        </div>
        <p class="des" slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <span>订单号：{{ record.order_no }}</span>
          <span>下单时间：{{ record.created_at }}</span>
          <span>收货时间：{{ record.confirm_time }}</span>
          <span>
            <a-badge :color="getStatus(record.trade_status)[1]" :text="getStatus(record.trade_status)[0]" />
          </span>
        </p>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { financiaList, exportFinanciaList } from '@/api/saas/profit'
import storage from 'store'

const columns = [
  { title: '用户信息', scopedSlots: { customRender: 'content' } },
  { title: '订单金额', dataIndex: 'total_price', sorter: (a, b) => a.total_price - b.total_price },
  { title: '实际付款', dataIndex: 'pay_price', sorter: (a, b) => a.pay_price - b.pay_price },
  { title: '转单支出', dataIndex: 'transit_price', sorter: (a, b) => a.transit_price - b.transit_price },
  { title: '分销支出', dataIndex: 'share_money', sorter: (a, b) => a.share_money - b.share_money },
  { title: '门店支出', dataIndex: 'md_profit', sorter: (a, b) => a.md_profit - b.md_profit },
  { title: '极差支出', dataIndex: 'share_detail_sub', sorter: (a, b) => a.share_detail_sub - b.share_detail_sub },
  { title: '股东分红', dataIndex: 'share_detail', sorter: (a, b) => a.share_detail - b.share_detail },
  { title: '平台抽成', dataIndex: 'sharing_receiver', sorter: (a, b) => a.sharing_receiver - b.sharing_receiver },
  { title: '结余金额', dataIndex: 'finally_price', sorter: (a, b) => a.finally_price - b.finally_price },
]

export default {
  name: 'financialList',

  data() {
    return {
      locale: zhCN,

      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },

      // 表头
      columns,
      // 查询条件参数
      queryParam: {
        order_no: '',
        user_name: '',
        order_start_time: '',
        order_end_time: '',
        confirm_start_time: '',
        confirm_end_time: '',
        status: '-1',
      },

      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      selectedRowKeys: [],
      defaultExpandedRowKeys: [],

      all_data: {
        md_profit: '0.00',
        pay_price: '0.00',
        share_detail: '0.00',
        share_detail_sub: '0.00',
        share_money: '0.00',
        sharing_receiver: '0.00',
        totalCount: 0,
        total_price: '0.00',
      },

      store_id: 0,
    }
  },

  computed: {
    getStatus() {
      return (status) => {
        let text, color
        switch (status) {
          case '2':
            text = '待收货'
            color = '#FAAD14'
            break

          case '3':
            text = '已收货'
            color = '#65C817'
            break

          case '4':
            text = '已完成'
            color = '#65C817'
            break
        }
        return [text, color]
      }
    },
  },

  created() {
    let store_id = storage.get('storeId')
    this.store_id = store_id
    this.getList()
  },

  methods: {
    moment,
    onChange(type, date, dateString) {
      if (type === 1) {
        if (dateString.length) {
          this.queryParam.order_start_time = dateString[0]
          this.queryParam.order_end_time = dateString[1]
        } else {
          this.queryParam.order_start_time = ''
          this.queryParam.order_end_time = ''
        }
      } else {
        if (dateString.length) {
          this.queryParam.confirm_start_time = dateString[0]
          this.queryParam.confirm_end_time = dateString[1]
        } else {
          this.queryParam.confirm_start_time = ''
          this.queryParam.confirm_end_time = ''
        }
      }
    },

    // 获取数据列表
    async getList(pageNo = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { queryParam, pageSize, store_id } = this

      const res = await financiaList({
        ...queryParam,
        pageSize,
        pageNo,
        store_id,
      })
      if (res.code == 0) {
        this.selectedRowKeys = []
        let { totalCount, data, all_data } = res.data
        this.total = totalCount
        this.list = data

        this.all_data = all_data
        this.pageNo = pageNo

        this.$nextTick(() => {
          this.defaultExpandedRowKeys = data.map((el) => el.id)
        })
      }
      hide()
    },

    // 选中多行
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    tablePageChange(page) {
      this.getList(page)
    },

    exportFn() {
      let { queryParam } = this,
        url = `${exportFinanciaList()}&`

      for (let i in queryParam) {
        if (queryParam[i]) {
          url += `${i}=${queryParam[i]}&`
        }
      }

      url += `isExprot=true&store_id=${this.store_id}`
      window.open(url, '_blank')
    },
  },
}
</script>

<style lang="less" scoped>
.alert {
  margin-bottom: 16px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);

  span {
    display: inline-block;
  }

  em {
    padding: 0 12px 0 5px;
    font-style: normal;
    color: #1890ff;
  }
}

.content {
  display: flex;
  align-items: center;
  height: 48px;
  max-width: 300px;
  overflow: hidden;

  .txt {
    margin-left: 16px;
    flex: 1;
    overflow: hidden;

    * {
      margin: 0;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    h3 {
      color: rgba(0, 0, 0, 0.85);
    }

    p {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}

.des {
  span {
    margin-right: 50px;
    display: inline-block;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>
